/**
 * @name ChatInput
 * @author darcrand
 * @desc 聊天内容输入
 */

import React, { Component } from 'react'
import './styles.scss'

const keyCodeEnter = 13

class ChatInput extends Component {
    static defaultProps = {
        onSend: text => {}
    }

    state = { text: '' }

    componentDidMount() {
        this.refs.input.focus()
    }

    onTextChange = e => this.setState({ text: e.target.value })

    onEnter = e => {
        const text = this.state.text
        if (e.keyCode === keyCodeEnter && text.trim()) {
            this.props.onSend(text)
            this.setState({ text: '' })
        }
    }

    render() {
        return (
            <input
                ref="input"
                type="text"
                classes="wrap"
                name="message"
                value={this.state.text}
                onChange={this.onTextChange}
                onKeyUp={this.onEnter}
                placeholder="input then hit endter"
                maxLength={200}
            />
        )
    }
}

export default ChatInput
